<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <%@ include file="/WEB-INF/views/include/head.jsp"%>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
  <legend>标签</legend>
</fieldset> 
 
  <button class="layui-btn" id="add">添加</button> 
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col >
	<col>
  </colgroup>
  <thead>
    <tr> 
	  <th>ID</th>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
	  <td>1</td>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
	  <td>2</td>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
  </tbody>
</table>
               
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<div id="demo20"></div>
</fieldset>  

<div style="display:none;" id="cl">
<br>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">标签名称</label>
    <div class="layui-input-inline">
      <input type="text" name="classify" lay-verify="title" autocomplete="off" placeholder="请输入标签名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="demo1" id="sub">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>


</form>
</div>
 

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
var count =20;

layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer
  
  ;
 
 
   laypage.render({
    elem: 'demo20'
    ,count: count  
    ,jump: function(obj){
      console.log(obj)  
	  //跑后台
    }


  });

$('#add').on('click', function(){
  var cl =$("#cl");


   layer.open({
      type: 1,
      area: ['420px', '240px'],
      shadeClose: true, //点击遮罩关闭
      content: cl
    });

 
  
});

$("#sub").on(function(){
layer.close();
});



});


</script>
</body>
</html>